<template>
  <el-dialog
    class="dia-style"
    :title="title"
    :visible.sync="open"
    :modal-append-to-body="false"
  >
   <div >
    <!-- 第一行 -->
    <div style="display:flex">
        <div style="width:70px;margin-right:41px;color: #606266;margin-left:46px;">评估单位:</div>
        <div style="color: #8C8C8C;">兵团公安局</div>
    </div>
    <!-- 第二行 -->
     <div style="display:flex;margin-top:20px">
        <div style="width:112px;color: #606266;margin-left:46px;">评估得分及等级:</div>
        <div style="color: #8C8C8C;">风险治理能力: <span style="color: #38C082;">优</span> (96)</div>
          <div style="width:112px;color: #606266;margin-left:189px;margin-right:41px">评估模型:</div>
        <div style="color: #8C8C8C;">风险治理能评估模型</div>
    </div>
    <!-- 第三行 -->
       <div style="display:flex;margin-top:20px">
        <div style="width:112px;color: #606266;margin-left:46px;">评估任务:</div>
        <div style="color: #8C8C8C;">兵团公安局-风险治理能力调度任务</div>
          <div style="width:112px;color: #606266;margin-left:109px;margin-right:41px">最后执行时间:</div>
        <div style="color: #8C8C8C;">2022-12-34 16:34:55</div>
    </div>
    <!-- 第四行 -->
     <div style="display:flex;margin-top:20px;margin-bottom:20px">
        <div style="width:90px;margin-right:41px;color: #606266;margin-left:46px;">评估结果详情:</div>
    </div>
    <!-- 结构图 -->
    <div style="background: rgba(0,0,0,0.02);width:770px;height:289px;margin-left:46px;border-top: 1px solid #eee;">
      <AntvPie></AntvPie>
    </div>
   </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { addDictClassify, updateDictClassify } from '@/api/milkyway/dictManager'
import AntvPie from "./AntvPie.vue";
// import antv form '@/utils/antv.js'

export default {
  components: { AntvPie },
  props: {
    title: {
      type: String,
      default() {
        return "评估详情";
      },
    },
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: "100",
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置

      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
        sort: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  computed: {
    formData: {
      get() {
        return this.form;
      },
      set(val) {},
    },
  },
  watch: {},
  created() {},
  methods: {
    show() {
      this.open = true;
      this.reset();
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-textarea__inner {
  width: 635px;
  height: 150px;
  
}
::v-deep .dia-style .el-dialog .el-dialog__body {
 padding-left: 54px;
 padding-right: 55px;
}
::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
  
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
 
}
::v-deep  .dia-style .el-dialog .el-dialog__body {
    padding: 180px !important;
}
</style>
